<template>
	<view class="container">
		<!-- uview 导航栏 -->
		<view class="nav-box">
			<u-navbar title="就业基础知识" @rightClick="rightClick" :autoBack="true" :fixed="false" :placeholder="true">
			</u-navbar>
		</view>
		<!-- end -->
		<!-- 侧边栏 -->
		<view class="side-box">
			<!-- 左侧 -->
			<ul class="left-list">
				<li @click="knowledge"><a href="#">就业知识</a></li>
				<li style="border-top: 0rpx;" @click="strategy"><a href="#">就业政策</a></li>
				<li style='border-top: 0rpx;' @click="answer">
					<view class="title-box"><a href="#">问</a><span
							style='display: block; margin-left: 1rpx; padding: 0rpx; font-size: 50rpx; font-weight: 100;'>AI</span>
					</view>
				</li>
			</ul>
			<!-- end -->
			<!-- 右侧 -->
			<view class="right-side-box">
				<ul class="right-list">
					<li><a href="#">政策1</a></li>
					<li><a href="#">政策2</a></li>
					<li><a href="#">政策3</a></li>
					<li style='border-bottom: 1rpx solid black;'><a href="#">政策4</a></li>
				</ul>
			</view>
			<!-- end -->
		</view>
		<!-- end -->
	</view>
</template>

<script>
	export default {
		data() {
			return {

			}
		},

		methods: {
			//基础知识
			knowledge() {
				uni.navigateTo({
					url: '/pages/knowledgeModel/knowledge/knowledge'
				});
			},
			//就业政策
			strategy() {
				uni.navigateTo({
					url: '/pages/knowledgeModel/strategy/strategy'
				});
			},
			//提问ai
			answer() {
				uni.navigateTo({
					url: '/pages/knowledgeModel/ai/ai'
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	/* 侧边栏 */
	.nav-box {

		height: 10rpx;

		span {
			font-size: 40rpx;
			font-weight: 700;
		}
	}

	/* end */
	/* 主容器 */
	.container {
		display: flex;
		flex-direction: column;
		/* justify-content: center; */
		/* align-items: center; */
	}

	/* end */
	/* 内容样式 */
	.side-box .left-list {
		display: flex;
		flex-direction: column;
		margin: 0rpx;
		padding: 0rpx;
		list-style-type: none;
		height: 1600rpx;
		width: 110rpx;
		justify-content: center;
		align-items: center;
		background-color: rgb(227, 251, 227);
	}

	.side-box .left-list li {

		padding: 55rpx;
		padding-right: 0rpx;
		flex: 1;
		height: 500rpx;
		width: 100rpx;
		border: 1rpx solid rgb(127, 151, 127);

	}

	.side-box .left-list li a {
		writing-mode: vertical-rl;
		text-decoration: none;
		color: black;
		font-size: 50rpx;
		font-weight: 100;
		margin-top: 70rpx;
		margin-left: -12rpx;
	}

	.side-box {
		margin-top: 80rpx;
		display: flex;
		/* height: 896px; */
		clear: both;
	}

	.right-side-box {
		height: 1600rpx;
		width: 700rpx;
		border-left: 1rpx solid rgb(127, 151, 127);
		background-color: rgb(240, 248, 250);
	}

	/* 右列表 */
	.right-list {
		margin: 0rpx;
		padding: 0rpx;
		list-style-type: none;
	}

	.right-list li {
		mragin: 0rpx;
		padding: 0rpx;
		height: 150rpx;
		border-top: 1rpx solid black;
		/* border-bottom: 1rpx solid black; */
		box-shadow: 0rpx 12rpx 17rpx #888;
	}

	.right-list li a {
		color: black;
		text-decoration: none;
		line-height: 150rpx;
		font-size: 45rpx;
		padding-left: 60rpx;
	}

	/* end */
	/* title-box 问AI */
	.title-box {
		margin-top: 50rpx;
	}

	/* end */
</style>